<template>
  <div class="page-container">
    <el-form :model="form" label-width="120px"
             class="common-form-panel-div"
             style="padding: 0px 10px; margin-top: 20px;">

      <el-table
        ref="cashTable"
        :data="form.cashAccountList"
        :span-method="objectSpanMethodFirst"
        border
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%; margin-top: 20px;">
        <el-table-column
          align="center"
          prop="customerCode"
          :label=" this.$tt('label_advance_charge_account_balance') + '(' + form.localCurrency + ')'"
          width="180">
          <template slot-scope="row">
            <label>{{ form.totalCashAmount }} </label><br>
            <el-button type="text" @click="toRecharge">{{$tt('label_offline_account')}}</el-button>

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="currencyType"
          :label="$tt('label_fms_bank_card_currency')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="leftAmount"
          :label="$tt('label_account_balance')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="lockAmount"
          :label="$tt('label_withholding_amount')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="freezeAmount"
          :label="$tt('label_frozen_amount')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="rate"
          :label="$tt('label_exchange_rate') + ' ('+$tt('label_exchange') + form.localCurrency + ')'">
        </el-table-column>
        <el-table-column
          align="center"
          prop="convertAmount"
          :label="$tt('label_conversion_amount')">
        </el-table-column>

      </el-table>


      <el-table
        ref="creditTable"
        :data="form.creditAccountList"
        :span-method="objectSpanMethodSecond"
        border
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%; margin-top: 20px">
        <el-table-column
          align="center"
          prop="customerCode"
          :label="$tt('label_total_available_credit_quota') + '(' + form.localCurrency + ')'"
          width="180">
          <template slot-scope="row">
            <label>{{ form.totalCreditAmount }} </label>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="productType"
          :label="$tt('label_product')">
          <template slot-scope="scope">
            <span>{{ $enumShow(scope.row.productType, "PmsProductTypeEnum") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="creditAmount"
          :label="$tt('label_total_credit_quota')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="freezeAmount"
          :label="$tt('label_frozen_quota')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="leftAmount"
          :label="$tt('label_available_quota')">
        </el-table-column>
        <el-table-column
          align="center"
          prop="customerCode"
          :label="$tt('label_operate')"
          width="180">
          <template slot-scope="row">
            <el-button type="text" @click="toCredit">{{ $tt('label_available_quota') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-form-item>
        <el-button type="text" @click="toBill">{{$tt('label_view_bills')}}</el-button>
        <el-button type="text" @click="toRecharge">{{$tt('label_view_recharge_record')}}</el-button>
        <el-button type="text" @click="toAccountLog">{{$tt('label_transaction_detail')}}</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>
export default {
  name: "account_view",
  title: "label_my_account",
  components: {},
  data() {
    return {
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引

      spanArr1: [], // 一个空的数组，用于存放每一行记录的合并数
      pos1: 0, // spanArr 的索引
      form: {
        totalCashAmount: 0.00,
        totalCreditAmount: 0.00,
        localCurrency: '',

        cashAccountList: [],
        creditAccountList: [],
      }

    };
  },
  created() {
    this.init_view()
  },
  destroyed() {

  },
  methods: {
    toAccountLog() {
      this.$router.push({path: '/page/fms/account/account_log'})
    },
    toCredit() {
      this.$router.push({path: '/page/fms/account/credit_apply'})
    },
    toRecharge() {
      this.$router.push({path: '/page/fms/account/recharge'})
    },
    toBill() {
      this.$router.push({path: '/page/fms/income/bill_list'})
    },
    init_view() {
      let _this = this

      _this.$ajax({
        url: '/fms-api/client/FmsClientRpc/selectCustomerAccountInfo.json',
        success: (responseData) => {
          _this.form = responseData.data

          _this.cashAccountList = _this.form.cashAccountList
          _this.creditAccountList = _this.form.creditAccountList

          _this.getSpanArr1(_this.cashAccountList)
          _this.getSpanArr(_this.creditAccountList)

        }
      });
    },
    getSpanArr(data) {
      // 遍历数据
      for (let i = 0; i < data.length; i++) {
        // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].customerCode === data[i - 1].customerCode) {
            // 如果相同就将索引为 pos 的值加一
            this.spanArr[this.pos] += 1;
            // 且将数组添加 0
            this.spanArr.push(0);
          } else {
            // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
            // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
            this.spanArr.push(1);
            // 同时 索引加一
            this.pos = i;
          }
        }
      }
      // // console.log
      // // console.log
    },
    getSpanArr1(data) {
      // 遍历数据
      for (let i = 0; i < data.length; i++) {
        // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].customerCode === data[i - 1].customerCode) {
            // 如果相同就将索引为 pos 的值加一
            this.spanArr1[this.pos1] += 1;
            // 且将数组添加 0
            this.spanArr1.push(0);
          } else {
            // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
            // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
            this.spanArr1.push(1);
            // 同时 索引加一
            this.pos1 = i;
          }
        }
      }
    },
    objectSpanMethodFirst({row, column, rowIndex, columnIndex}) {
      // 首行合并
      if (columnIndex === 0) {
        // const _row = this.spanArr1[rowIndex];
        // const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: rowIndex==0?this.form.cashAccountList.length:0,
          colspan: 1
        };
      }
    },
    objectSpanMethodSecond({row, column, rowIndex, columnIndex}) {
      // 首行 /末行合并
      if (columnIndex === 0 || columnIndex === 5) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };


        // if (rowIndex == 0) {
        //   return {
        //     rowspan: this.creditAccountList.length,
        //     colspan: 1
        //   };
        // } else {
        //   return {
        //     rowspan: 0,
        //     colspan: 0
        //   };
        //
        // }
      }

  },

}

}
</script>

<style scoped>

</style>
